<script setup>
import { ref } from 'vue'

import testA from './testA.vue'
import testB from './testB.vue'

const componentsList = { testA, testB }
const currentComponentIndex = ref('testA')

function changeShow(index) {
  switch (index) {
    case 0:
      currentComponentIndex.value = 'testA'
      break
    case 1:
      currentComponentIndex.value = 'testB'
      break
  }
}
</script>

<template>
  <button @click="changeShow(0)">使用A</button>
  <button @click="changeShow(1)">使用B</button>
  <keep-alive :include="'testA'">
    <component
      :is="componentsList[currentComponentIndex]"
      :key="currentComponentIndex"
    ></component>
  </keep-alive>
</template>
